<style lang="less" scoped>
    @import "../less/_variable.less";

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        color: #fff;
        text-align: center;
        background: @c_headerbgColor;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        border-bottom: 1px solid @c_headerbgColor;
        transition: opacity ease 0.5s;
        padding: 0 0.3rem;
        &.fromMicroProgram{
            height: 0 !important;
            display: none;
        }
        .item {
            a {
                font-size: 0.32rem;
                color: #fff;

            }
        }
        .title {
            width: 70%;
            margin: 0 auto;
            font-size: 0.36rem;
            color: @c_headerColor;
        }
        .left, .right {
            width: 0.8rem;
            height: 0.8rem;
            display: flex;
            align-items: center;
            font-size: .2rem;
            color: #fff;
        }
        .right {
            justify-content: flex-end;
        }
    }
</style>
<template>
    <header class="header" :class="fromMicroProgram ? 'fromMicroProgram' : ''"
            :style="{height: interactive.statusBarHeight.height,paddingTop:parseFloat(interactive.statusBarHeight.height) - 0.88 + 'rem'}">
        <div class="item left" v-on:click="isBack == '1'?goBack():''">
            <slot name="left"></slot>
        </div>
        <div v-if="!this.$slots.title" class="title">{{ title?title:$route.meta.title}}</div>
        <slot v-if="this.$slots.title" name="title"></slot>
        <div class="item right">
            <slot name="right"></slot>
        </div>
    </header>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    props: {
      isBack: {
        type: String,
        default: '1'
      },
      title: {
        type: String,
        default: ''
      },
    },
    data(){
      return(
        {
          fromMicroProgram: false
        })
    },
    activated() {
      if (this.$route.matched[1].name === "homeIndex") {
        this.comJS.refreshMainTopTwo()
      } else {
        this.comJS.refreshMainTop()
      }
    },
    methods: {
      goBack() {
        if (this.comJS.checkFormShare()) {
          this.Interactive.activityWebDismiss();
        } else {
            this.$router.goBack()
        }
      }
    },
    computed: mapState({interactive: state => state.interactive,pageUrl:state=>state.router}),
  }
</script>